<template>
  <div>
    <a-slider
      id="test"
      v-model:value="value1"
      :disabled="disabled"
    />
    <a-slider
      v-model:value="value2"
      range
      :disabled="disabled"
    />

  </div>
  <div style="display: inline-block; height: 300px; margin-left: 70px">
    <a-slider
      v-model:value="value3"
      vertical
      range
      :marks="marks"
      :reverse="true"
    />
  </div>
  <a-slider
    :tip-formatter="formatter"
    :tooltip-open="true"
  />
  <a-divider>

  </a-divider>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <a-slider
      v-model:value="value11"
      :marks="marks11"
    >
      <template #mark="{ label, point }">
        <template v-if="point === 100">
          <strong>{{ label }}</strong>
        </template>
        <template v-else>{{ label }}</template>
      </template>
    </a-slider>

  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      value1: 0,
      value2: [20, 50],
      disabled: false,
      value3: [26, 37],
      marks:
      {
        0: '0°C',
        26: '26°C',
        37: '37°C',
        100: {
          style: {
            color: '#f50',
          },
          label: ('100°C'),
        },
      }
      ,
      value11: 37,
      marks11: {


        0: '0°C',
        26: '26°C',
        37: '37°C',
        100: {
          style: {
            color: '#f50',
          },
          label: '100°C',
        },



      }
    }
  },
  created() { },
  mounted() { },
  methods: {
    onChange() {
      console.log(1);
    },
    onAfterChange() {
      console.log(111);
    },
    formatter(value) {
      return `${value}%`;
    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
// .icon-wrapper {
//   position: relative;
//   padding: 0px 30px;
// }

// .icon-wrapper .anticon {
//   position: absolute;
//   top: -2px;
//   width: 16px;
//   height: 16px;
//   line-height: 1;
//   font-size: 16px;
//   color: rgba(0, 0, 0, 0.25);
// }

// .icon-wrapper .anticon:first-child {
//   left: 0;
// }

// .icon-wrapper .anticon:last-child {
//   right: 0;
// }
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
</style>
